<template>
	<view class="review-page">
		<!-- 页面头部 -->
		<view class="page-header">
			<view class="header-left">
				<text class="review-count">评论 {{ commentCount }}</text>
				<text class="header-tab">相关</text>
			</view>
			<view class="header-right">
				<view class="author-filter">
					<checkbox :checked="onlyShowAuthor" @change="toggleAuthorFilter" />
					<text class="filter-text">只看作者</text>
				</view>
				<view class="sort-button">
					<text class="iconfont icon-sort"></text>
					<text class="sort-text">最新</text>
				</view>
			</view>
		</view>

		<!-- 评论列表 -->
		<scroll-view class="content-scroll" scroll-y>
			<view class="review-list">
				<view class="review-item" v-for="(item, index) in reviewList" :key="index">
					<!-- 主评论 -->
					<view class="user-info">
						<view class="user-avatar">
							<image src="../image/avatar.png" mode="aspectFill"></image>
						</view>
						<view class="user-detail">
							<view class="user-name-wrapper">
								<text class="user-name">{{ item.username }}</text>
								<text v-if="item.isAuthor" class="author-tag">作者</text>
							</view>
						</view>
					</view>
					<view class="review-text">
						<text>{{ item.content }}</text>
					</view>
					<view class="review-images" v-if="item.images && item.images.length > 0">
						<view class="image-item" v-for="(img, imgIndex) in item.images" :key="imgIndex">
							<image :src="img" mode="aspectFill"></image>
						</view>
					</view>
					<view class="review-meta">
						<view class="review-floor">
							<text class="floor-text">{{ item.specs }}</text>
							<text class="review-date">{{ item.date }}</text>
						</view>
						<view class="review-actions">
							<view class="reply-button" @click="showReplyInput(index)">
								<text class="action-text">回复</text>
							</view>
							<!-- 		<view class="like-button" @click="likeComment(index)">
								<text class="iconfont" :class="item.isLiked ? 'icon-dianzan1' : 'icon-dianzan'"></text>
								<text v-if="item.likes && item.likes > 0" class="like-count">{{ item.likes }}</text>
							</view> -->
						</view>
					</view>

					<!-- 回复评论列表 -->
					<view class="reply-list" v-if="item.replies && item.replies.length > 0">
						<view class="reply-item" v-for="(reply, replyIndex) in item.replies" :key="replyIndex">
							<view class="user-info">
								<view class="user-avatar">
									<image src="../image/avatar.png" mode="aspectFill"></image>
								</view>
								<view class="user-detail">
									<view class="user-name-wrapper">
										<text class="user-name">{{ reply.username }}</text>
										<text v-if="reply.isAuthor" class="author-tag">作者</text>
									</view>
								</view>
							</view>
							<view class="review-text">
								<text v-if="reply.replyTo">回复 <text class="reply-to-name">@{{ reply.replyTo }}</text>:
									{{ reply.content }}</text>
								<text v-else>{{ reply.content }}</text>
							</view>
							<view class="review-images" v-if="reply.images && reply.images.length > 0">
								<view class="image-item" v-for="(img, imgIndex) in reply.images" :key="imgIndex">
									<image :src="img" mode="aspectFill"></image>
								</view>
							</view>
							<view class="review-meta">
								<view class="review-floor">
									<text class="review-date">{{ reply.date }}</text>
								</view>
								<view class="review-actions">
									<view class="reply-button" @click="showReplyInput(index, replyIndex)">
										<text class="action-text">回复</text>
									</view>
									<!-- <view class="like-button" @click="likeReply(index, replyIndex)">
										<text class="iconfont"
											:class="reply.isLiked ? 'icon-dianzan1' : 'icon-dianzan'"></text>
										<text v-if="reply.likes && reply.likes > 0"
											class="like-count">{{ reply.likes }}</text>
									</view> -->
								</view>
							</view>
						</view>
					</view>

					<!-- 回复输入框 (仅在当前评论被选中时显示) -->
					<view class="reply-input-wrapper" v-if="replyingTo.parentIndex === index">
						<input class="reply-input" v-model="replyContent"
							:placeholder="replyingTo.childIndex !== null ? `回复 @${reviewList[replyingTo.parentIndex].replies[replyingTo.childIndex].username}` : '回复评论'"
							focus confirm-type="send" @confirm="addReply" />
						<view class="reply-input-actions">
							<button class="cancel-btn" @click="cancelReply">取消</button>
							<button class="send-btn" @click="addReply">发送</button>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部评论栏 -->
		<view class="bottom-action-bar">
			<view class="comment-input-wrapper" @click="showCommentPopup">
				<view class="comment-input-placeholder">
					<text>来说几句...</text>
				</view>
			</view>
			<view class="action-buttons">
				<view class="action-button" @click="toggleLike">
					<text class="iconfont" :class="isLiked ? 'icon-dianzan1' : 'icon-dianzan'"></text>
					<text>{{ likeCount }}</text>
				</view>
				<view class="action-button" @click="toggleFavorite">
					<text class="iconfont" :class="isFavorited ? 'icon-shoucang' : 'icon-wujiaoxing'"></text>
					<text>收藏</text>
				</view>
				<view class="action-button">
					<text class="iconfont icon-31daipingjia"></text>
					<text>{{ commentCount }}</text>
				</view>
			</view>
		</view>

		<!-- 评论输入弹出层 -->
		<u-popup v-model="showCommentLayer" mode="bottom" :closeable="false" :border-radius="26"
			:safe-area-inset-bottom="false">
			<view class="comment-popup">
				<view class="comment-input-area">
					<input type="text" class="comment-popup-input" v-model="newComment" placeholder="来说几句..." focus
						confirm-type="send" @confirm="addComment" ref="commentPopupInput" />
					<view class="input-action-btn">
						<button class="send-btn" @click="addComment">发送</button>
					</view>
				</view>

				<!-- 表情选择器 -->
				<view class="emoji-selector-popup" v-if="showEmojiPicker">
					<view class="emoji-list">
						<view class="emoji-item" v-for="(emoji, index) in emojiList" :key="index"
							@click="selectEmoji(emoji)">
							{{ emoji }}
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import * as GoodsApi from '@/api/goods'
	export default {
		name: 'ReviewPage',
		data() {
			return {
				// 当前选中的评价标签
				activeTag: 'all',
				// 新评论内容
				newComment: '',
				// 回复内容
				replyContent: '',
				// 正在回复的评论索引
				replyingTo: {
					parentIndex: null,
					childIndex: null
				},
				// 点赞数量
				likeCount: 7,
				// 评论数量
				commentCount: 77,
				// 是否已点赞
				isLiked: false,
				// 是否已收藏
				isFavorited: false,
				// 是否显示表情选择器
				showEmojiPicker: false,
				// 表情列表
				emojiList: ['😊', '😂', '😍', '👍', '❤️', '🎉', '🔥', '👏', '🙏', '💪', '🌟', '💯'],
				// 是否只看作者
				onlyShowAuthor: false,
				// 评价列表数据
				reviewList: [{
						parent_comment_id: 0,
						username: '吹过你吹过的晚风',
						avatar: '../image/avatar.png',
						date: '昨天 14:21',
						content: '他们不是已经再考虑这个问题了，所有独立下水道玩法越来越多，迷城独立，雾都独立，画画独立，卡牌独立，只要买门票不去异界刷，什么魔方，玩偶黑潮黑帆，你不去异界跟你毛关系都没有',
						images: [],
						specs: '30楼',
						likes: 9,
						isLiked: false,
						isAuthor: false,
						replies: [{
							user_id: 0,
							username: 'PP',
							avatar: '../image/avatar.png',
							date: '昨天 14:30',
							content: '说得对，这个问题确实需要重视',
							images: [],
							likes: 2,
							isLiked: false,
							isAuthor: true,
							replyTo: '吹过你吹过的晚风'
						}]
					},
					{
						parent_comment_id: 1,
						username: '护肝小达人',
						avatar: '../image/avatar.png',
						date: '昨天 13:55',
						content: '选自己喜欢玩的玩法玩不对吗？非得跟着赛季走干嘛',
						images: [],
						specs: '29楼',
						likes: 0,
						isLiked: false,
						isAuthor: false,
						replies: []
					},
					{
						parent_comment_id: 2,
						username: 'PP',
						avatar: '../image/avatar.png',
						date: '昨天 14:09',
						content: '你喜欢玩旧东西可能是因为真的喜欢 或者是有相应的宝宝这个没毛病，但是游戏不能长期没有新东西，我说的新东西不是收益方式而是新玩法，一直出新玩法就避免不了堆砌臃肿',
						images: [],
						specs: '28楼',
						likes: 0,
						isLiked: false,
						isAuthor: true,
						replies: [{
								user_id: 0,
								username: '护肝小达人',
								avatar: '../image/avatar.png',
								date: '昨天 14:15',
								content: '我觉得你说得有道理，但是更新节奏太快了',
								images: [],
								likes: 0,
								isLiked: false,
								isAuthor: false,
								replyTo: 'PP'
							},
							{
								user_id: 1,
								username: '0npv4yml',
								avatar: '../image/avatar.png',
								date: '昨天 14:20',
								content: '确实，平衡很难把握',
								images: [],
								likes: 1,
								isLiked: false,
								isAuthor: false,
								replyTo: 'PP'
							}
						]
					},
					{
						parent_comment_id: 3,
						username: '护肝小达人',
						avatar: '../image/avatar.png',
						date: '昨天 13:54',
						content: '给大伙乐笑了',
						images: [],
						specs: '27楼',
						likes: 0,
						isLiked: false,
						isAuthor: false,
						replies: []
					},
					{
						parent_comment_id: 4,
						username: '0npv4yml',
						avatar: '../image/avatar.png',
						date: '昨天 12:00',
						content: '感觉游戏整体构思架构有问题，你想想看做减法？减你的玩法那你充钱充了这么多宠物你不乐意了，减别的玩法同样别的玩家也不乐意了，然后每个赛季又新加玩法，肉眼可见越来越臃肿，堆得越多BUG越多😂程序包成💩山的😝',
						images: [],
						specs: '26楼',
						likes: 1,
						isLiked: false,
						isAuthor: false,
						replies: []
					}
				],
				showCommentLayer: false,
				goodsId: undefined
			}
		},
		created() {
			// 可以在这里获取评价数据
			// this.getReviewData()
		},
		onLoad(option) {
			this.goodsId = option.goodsId
		},
		mounted(){
			this.getData()
		},
		methods: {
			// 获取评价数据
			getData() {
				new Promise((resolve, reject) => {
					// 调用封装的API函数
					GoodsApi.getdata(this.goodsId)
						.then(result => {
							console.log(result,'result0-0--0-0-=-=0')
							// app.goods = result.data.detail
							// if (app.goods.goods_type == GoodsTypeEnum.PHYSICAL.value) {
							// 	app.isEnableCart = true
							// }
							// resolve(result)
						})
						// .catch(reject)
				})
			},

			// 切换评价标签
			changeTag(tag) {
				this.activeTag = tag
				// 可以在这里根据标签筛选评价列表
			},

			// 显示表情选择器
			showEmojiSelector() {
				this.showEmojiPicker = !this.showEmojiPicker
			},

			// 选择表情
			selectEmoji(emoji) {
				this.newComment += emoji
			},

			// 添加评论
			addComment() {
				if (!this.newComment.trim()) return;

				// 获取当前时间
				const now = new Date();
				let hours = now.getHours();
				let minutes = now.getMinutes();
				minutes = minutes < 10 ? '0' + minutes : minutes;
				let timeStr = `${hours}:${minutes}`;

				// 创建新评论对象
				const newCommentObj = {
					username: '我', // 假设当前用户名为"我"
					avatar: '../image/avatar.png',
					date: `今天 ${timeStr}`,
					content: this.newComment,
					images: [],
					specs: `${this.reviewList.length + 26}楼`,
					likes: 0,
					isLiked: false,
					isAuthor: false,
					replies: []
				};

				// 添加到评论列表开头
				this.reviewList.unshift(newCommentObj);

				// 清空输入框
				this.newComment = '';

				// 更新评论总数
				this.commentCount++;

				// 隐藏表情选择器和评论弹出层
				this.showEmojiPicker = false;
				this.showCommentLayer = false;
			},

			// 显示回复输入框
			showReplyInput(parentIndex, childIndex = null) {
				this.replyingTo = {
					parentIndex,
					childIndex
				};
				this.replyContent = '';
			},

			// 取消回复
			cancelReply() {
				this.replyingTo = {
					parentIndex: null,
					childIndex: null
				};
				this.replyContent = '';
			},

			// 添加回复
			addReply() {
				if (!this.replyContent.trim()) return;

				// 获取当前时间
				const now = new Date();
				let hours = now.getHours();
				let minutes = now.getMinutes();
				minutes = minutes < 10 ? '0' + minutes : minutes;
				let timeStr = `${hours}:${minutes}`;

				// 确定回复对象
				let replyToUsername = this.reviewList[this.replyingTo.parentIndex].username;
				// 确定回复对象id
				let parent_comment_id = this.reviewList[this.replyingTo.parentIndex].parent_comment_id;
				console.log()

				if (this.replyingTo.childIndex !== null) {
					replyToUsername = this.reviewList[this.replyingTo.parentIndex].replies[this.replyingTo.childIndex]
						.username;
				}

				// 创建新回复对象
				const newReplyObj = {
					// username: '我', // 假设当前用户名为"我"
					// avatar: '../image/avatar.png',
					// date: `今天 ${timeStr}`,
					content: this.replyContent,
					user_id: 12345,
					// images: [],
					parent_comment_id: parent_comment_id,
					post_id:this.goodsId,
					// replyTo: replyToUsername
				};
				
				new Promise((resolve, reject) => {
				
					// 调用封装的API函数
					GoodsApi.consultingData(newReplyObj)
						.then(result => {
							console.log(result,'result0-0--0-0-=-=0')
							// app.goods = result.data.detail
							// if (app.goods.goods_type == GoodsTypeEnum.PHYSICAL.value) {
							// 	app.isEnableCart = true
							// }
							resolve(result)
						})
						.catch(reject)
				})

				// 添加到回复列表
				this.reviewList[this.replyingTo.parentIndex].replies.push(newReplyObj);

				// wx.request({
				//     url: 'https://com.inetcontrol.net/index.php?s=/api/NewComment/add', // 替换为实际的接口地址
				//     method: 'POST',
				//     data: {
				//         user_id: 12345,
				//         goodsId: this.goodsId,
				//         content: newReplyObj.content,
				//         parent_comment_id: parent_comment_id // 如果是回复评论，需要提供父评论ID
				//     },
				//     header: {
				//         'content-type': 'application/json'
				//     },
				//     success(res) {
				//         if (res.data.status === 200) {
				//             console.log('评论成功', res.data);
				//         } else {
				//             console.error('评论失败', res.data.message);
				//         }
				//     },
				//     fail(error) {
				//         console.error('请求失败', error);
				//     }
				// });



				// 清空输入框并重置回复状态
				this.replyContent = '';
				this.replyingTo = {
					parentIndex: null,
					childIndex: null
				};

				// 更新评论总数
				this.commentCount++;
			},

			// 切换点赞状态
			toggleLike() {
				this.isLiked = !this.isLiked;
				if (this.isLiked) {
					this.likeCount++;
				} else {
					this.likeCount--;
				}
			},

			// 切换收藏状态
			toggleFavorite() {
				this.isFavorited = !this.isFavorited;
			},

			// 显示评论输入弹出层
			showCommentPopup() {
				this.showCommentLayer = true;
				// 重置表情选择器状态
				this.showEmojiPicker = false;
			},

			// 切换只看作者筛选
			toggleAuthorFilter(e) {
				this.onlyShowAuthor = e.detail.value;
				// 这里可以添加筛选逻辑
			},

			// 点赞评论
			likeComment(index) {
				const comment = this.reviewList[index];
				comment.isLiked = !comment.isLiked;

				if (comment.isLiked) {
					comment.likes = (comment.likes || 0) + 1;
				} else if (comment.likes > 0) {
					comment.likes--;
				}
			},

			// 点赞回复
			likeReply(parentIndex, childIndex) {
				const reply = this.reviewList[parentIndex].replies[childIndex];
				reply.isLiked = !reply.isLiked;

				if (reply.isLiked) {
					reply.likes = (reply.likes || 0) + 1;
				} else if (reply.likes > 0) {
					reply.likes--;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.review-page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #fff;
	}

	/* 页面头部 */
	.page-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 24rpx;
		border-bottom: 1px solid #f0f0f0;
	}

	.header-left {
		display: flex;
		align-items: center;
	}

	.review-count {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-right: 30rpx;
	}

	.header-tab {
		font-size: 28rpx;
		color: #999;
	}

	.header-right {
		display: flex;
		align-items: center;
	}

	.author-filter {
		display: flex;
		align-items: center;
		margin-right: 20rpx;
	}

	.filter-text {
		font-size: 26rpx;
		color: #666;
		margin-left: 6rpx;
	}

	.sort-button {
		display: flex;
		align-items: center;
	}

	.sort-text {
		font-size: 26rpx;
		color: #666;
		margin-left: 6rpx;
	}

	/* 评论列表 */
	.content-scroll {
		flex: 1;
		overflow: hidden;
		/* Add padding at the bottom to prevent content from being hidden behind the fixed bar */
		padding-bottom: calc(110rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
	}

	.review-list {
		padding: 0 24rpx;
	}

	.review-item {
		padding: 24rpx 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.user-avatar {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 16rpx;
		background-color: #f5f5f5;
	}

	.user-avatar image {
		width: 100%;
		height: 100%;
	}

	.user-detail {
		flex: 1;
	}

	.user-name-wrapper {
		display: flex;
		align-items: center;
	}

	.user-name {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.author-tag {
		font-size: 22rpx;
		color: #ff8f1f;
		background-color: #fff8e6;
		padding: 2rpx 10rpx;
		border-radius: 4rpx;
		margin-left: 10rpx;
	}

	.review-text {
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
		margin-bottom: 16rpx;
	}

	.reply-to-name {
		color: #ff8f1f;
		font-weight: 500;
	}

	.review-images {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 16rpx;
	}

	.image-item {
		width: 160rpx;
		height: 160rpx;
		margin-right: 16rpx;
		margin-bottom: 16rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.image-item image {
		width: 100%;
		height: 100%;
	}

	.review-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		color: #999;
	}

	.review-floor {
		display: flex;
		align-items: center;
	}

	.floor-text {
		margin-right: 10rpx;
	}

	.review-actions {
		display: flex;
		align-items: center;
	}

	.reply-button {
		margin-right: 20rpx;
	}

	.action-text {
		color: #999;
	}

	.like-button {
		display: flex;
		align-items: center;
	}

	.like-count {
		margin-left: 4rpx;
	}

	/* 回复列表样式 */
	.reply-list {
		margin-top: 16rpx;
		margin-left: 60rpx;
		/* 缩进，使回复看起来是嵌套的 */
		border-left: 4rpx solid #f5f5f5;
		/* 左侧添加一条竖线 */
		padding-left: 20rpx;
	}

	.reply-item {
		padding: 16rpx 0;
		border-bottom: 1px solid #f5f5f5;
	}

	.reply-item:last-child {
		border-bottom: none;
	}

	/* 回复输入框样式 */
	.reply-input-wrapper {
		display: flex;
		flex-direction: column;
		margin-top: 16rpx;
		margin-left: 60rpx;
		padding: 16rpx;
		background-color: #f9f9f9;
		border-radius: 8rpx;
	}

	.reply-input {
		background-color: #fff;
		border-radius: 30rpx;
		padding: 10rpx 20rpx;
		font-size: 26rpx;
		height: 60rpx;
		margin-bottom: 16rpx;
	}

	.reply-input-actions {
		display: flex;
		justify-content: flex-end;
	}

	.cancel-btn {
		background-color: #f5f5f5;
		color: #666;
		border-radius: 30rpx;
		padding: 0 20rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 26rpx;
		border: none;
		min-width: 80rpx;
		text-align: center;
		margin-right: 16rpx;
	}

	.send-btn {
		background-color: #ff8f1f;
		color: #fff;
		border-radius: 30rpx;
		padding: 0 20rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 26rpx;
		border: none;
		min-width: 80rpx;
		text-align: center;
	}

	/* 底部操作栏 */
	.bottom-action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		padding: 20rpx 24rpx;
		border-top: 1px solid #f0f0f0;
		background-color: #fff;
		justify-content: space-between;
		align-items: center;
		z-index: 999;
		/* Add safe area inset for iOS devices with notches */
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	}

	.comment-input-wrapper {
		width: 55%;
	}

	.comment-input-placeholder {
		background-color: #f5f5f5;
		border-radius: 30rpx;
		padding: 0 20rpx;
		font-size: 26rpx;
		height: 70rpx;
		line-height: 70rpx;
		color: #999;
	}

	.action-buttons {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 45%;
	}

	.action-button {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #666;
		margin-left: 10rpx;
	}

	.action-button .iconfont {
		margin-right: 6rpx;
		font-size: 36rpx;
	}

	/* 评论弹出层 */
	.comment-popup {
		padding: 20rpx;
		position: relative;
		background-color: #fff;
	}

	.comment-input-area {
		display: flex;
		align-items: center;
		position: relative;
		padding: 10rpx 0;
	}

	.comment-popup-input {
		flex: 1;
		background-color: #f5f5f5;
		border-radius: 30rpx;
		padding: 10rpx 20rpx;
		font-size: 28rpx;
		height: 60rpx;
		padding-right: 80rpx;
	}

	.input-action-btn {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 表情选择器 */
	.emoji-selector-popup {
		margin-top: 20rpx;
		width: 100%;
		background-color: #fff;
		border-top: 1px solid #eee;
		padding: 20rpx 0;
	}

	.emoji-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.emoji-item {
		width: 70rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		margin: 10rpx;
		cursor: pointer;
	}

	/* 图标样式 */
	@font-face {
		font-family: 'iconfont';
		src: url('data:font/woff2;charset=utf-8;base64,...') format('woff2');
	}

	.iconfont {
		font-family: 'iconfont' !important;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-dianzan:before {
		content: '\e8ad';
	}

	.icon-dianzan1:before {
		content: "\e8c3";
	}

	.icon-shoucang:before {
		content: "\e647";
	}

	.icon-wujiaoxing:before {
		content: "\e6b3";
	}

	.icon-comment:before {
		content: '\e667';
	}

	.icon-sort:before {
		content: '\e666';
	}
</style>